<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css">
    <script src="../bootstrap-table/bootstrap-table.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../bootstrap/js/html5shiv.min.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <script src="../toastr/toastr.min.js"></script>

</head>
<body>
<style>
    ::-webkit-scrollbar {display:none}
</style>
<div style=" width:0px;   height: 0px;  overflow-y: scroll;">
</div>
<div class="container-fluid">
    <div class="row" id="tableToolBar">
        <button class="btn btn-sm btn-warning" id="tijiaoBtn" style="margin-left: 15px">
            <i class="fa fa-plus" aria-hidden="true"></i>提交订单
        </button>
        <button class="btn btn-sm btn-danger" id="clearBtn" style="margin-left: 15px">
            <i class="fa fa fa-trash" aria-hidden="true"></i>清空购物车
        </button>
    </div>

    <div class="row">
        <div class="col-md-6" id="myTable"></div>
    </div>

    <!--    删除模态框-->
    <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        删除网课</h4>
                </div>
                <div class="modal-body" id="deleteDialogMsg">
                    确定要删除该网课嘛
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="deleteBtn">
                        删除
                    </button>
                </div>
            </div><!-- /.modal-content --></div>
    </div>

    <!--    支付模态框-->
    <div class="modal fade" id="payModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="payModalLabel">
                        请选择支付方式</h4>
                </div>
                <label id="jiage"></label>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" id="zhiBtn">
                        支付宝支付
                    </button>
                    <button type="button" class="btn btn-success" id="weiBtn">
                        微信支付
                    </button>
                </div>
            </div><!-- /.modal-content --></div>
    </div>

    <!--    清空模态框-->
    <div class="modal fade" id="clearModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="clearModalLabel">
                        确定清空购物车吗</h4>
                </div>
                <label id="clear"></label>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-info" id="clearOKBtn" data-dismiss="modal">
                        清空
                    </button>
                </div>
            </div><!-- /.modal-content --></div>
    </div>

</div>

<script>
    $(document).ready(function() {
        showModal();
        inittable();
        $("#tijiaoBtn").click(function () {
            $.ajax({
                url: "../shopcar/selectAll",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                success: function (result) {
                    var lable=document.getElementById("jiage");
                    var money=0;
                    var xtmoney=0;
                    var fourmoney=0;
                    var sixmoney=0;
                    for(var i=0;i<result.length;i++){
                        money+=parseInt(result[i].s_price);
                        switch (result[i].qf) {
                            case 1:
                                xtmoney+=parseInt(result[i].s_price);
                                SelectSaleCount(2);
                                SelectSaleMoney(2,xtmoney);break;

                            case 2:
                                fourmoney+=parseInt(result[i].s_price);
                                SelectSaleCount(4);
                                SelectSaleMoney(4,fourmoney);break;
                            case 3:
                                sixmoney+=parseInt(result[i].s_price);
                                SelectSaleCount(6);
                                SelectSaleMoney(6,sixmoney);
                        }
                    }
                    lable.innerText="您需要支付"+money+"元";
                }
            });
        });

    //查询系统课销量
        function SelectSaleCount(s_id){
            $.ajax({
                url: "../SaleCount/selectById",
                type:"post",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    s_id:s_id
                },
                success:function (result) {
                    UpdadeSaleCount(s_id,result.object.s_count);
                }
            })
        }
        //更新系统课销量
        function UpdadeSaleCount(s_id,num) {
            $.ajax({
                url: "../SaleCount/update",
                type:"post",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    s_id:s_id,
                    s_count:num+1
                },
            })
        }

        //查询系统课销量额
        function SelectSaleMoney(s_id,money){
            $.ajax({
                url: "../SaleMoney/selectById",
                type:"post",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    s_id:s_id
                },
                success:function (result) {
                    UpdadextCourseSaleMoney(s_id,money);
                }
            })
        }
        //更新系统课销量额
        function UpdadextCourseSaleMoney(s_id,money) {
            $.ajax({
                url: "../SaleMoney/update",
                type:"post",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    s_id:s_id,
                    s_price:money
                },
            })
        }
        $("#clearOKBtn").click(function () {
            $.ajax({
                url: "../shopcar/clear",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法

            });
            inittable();
        });
        $("#deleteBtn").click(function () {
            $.ajax({
                url:"../shopcar/deleteOne",
                type:"get",
                dataType:"json",
                data:{
                    s_id:s_id
                },
                success:function (result) {
                    // alert(JSON.stringify(result));
                    var errorCose=result.errorCode;
                    if(errorCose==0){
                        //模态框隐藏
                        $("#myDeleteModal").modal("hide");
                        inittable();
                        toastr.success(result.status);
                    }
                }
            });
        });
        function inittable() {
            //让bookstraptable销毁
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "../shopcar/selectAll",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "s_id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                columns: [

                    {
                        checkbox: true,

                    },
                    {
                        field: 's_name',
                        title: '网课名称',
                        sortable: true,
                        width: 550,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 's_price',
                        title: '网课价格',
                        sortable: true,
                        width: 550,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        title: "操作",
                        width: 500,
                        align: 'center',
                        valign: 'middle',
                        events: operateEvents,
                        //如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        formatter: function (value, row, index) {
                            return "<button class='btn btn-danger btn-sm deleteCourse'><i class='fa fa-trash' aria-hidden='true'></i>删除商品</button>"
                        }
                    }

                ],
                //    复选框居中显示
                onLoadSuccess: function () {
                    //复选框的居中样式，自定义一个复选框的CSS样式，代替了BootStrap的默认样式
                    $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                },
            });
        };
    });
    window.operateEvents={
        'click .deleteCourse': function (e, value, row, index) {

            s_id=row.s_id;
            $("#deleteDialogMsg").html("确定要删除网课"+row.s_name)
            $("#myDeleteModal").modal("show");
        }
    }
    $("#tijiaoBtn").click(function () {
        $("#payModal").modal("show");
    })

    $("#clearBtn").click(function () {
        $("#clearModal").modal("show");
    })
    $("#zhiBtn").click(function () {
        alert("支付成功,请关闭支付页面")
    })

    $("#weiBtn").click(function () {
        alert("支付成功,请关闭支付页面")
    })
    function showModal() {
        var html = "";
        $.ajax({
            url: "../shopcar/selectAll",
            type: "get",
            dataType: "json",
            async: false,//设置为同步方法
        });

    }
</script>
</body>
</html>